import { Tabs } from "antd";
import { FC, useState } from "react";
import styles from "./index.less";
import BaseInfo from "./base/index";
import Security from "./security/index";
import { PageContainer } from "@ant-design/pro-components";
const PersonalDetails: FC<{}> = () => {
  const [defaultKey, setDefaultKey] = useState("1");
  const items = [
    { key: "1", label: "基本设置" },
    { key: "2", label: "安全设置" },
  ];
  const onChange = (e) => {
    setDefaultKey(e);
  };
  return (
    <PageContainer title="个人设置">
      <div className={styles.PersonalDetails}>
        <div className={styles.personContent}>
          <div className={styles.contenteLeft}>
            <Tabs
              defaultActiveKey={defaultKey}
              tabPosition={"left"}
              items={items}
              onChange={onChange}
            />
          </div>
          <div className={styles.contentRight}>
            {defaultKey == "1" ? <BaseInfo /> : <Security />}
          </div>
        </div>
      </div>
    </PageContainer>
  );
};
export default PersonalDetails;
